import axios from "../utils/axios"
import type { FormProps } from 'antd';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom'
const Login = () => {
	const navigate = useNavigate()
	type FieldType = {
		account?: string;
		password?: string;
	};
	const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
		console.log('Success:', values);
		const res = await axios.post('/login', values)
		console.log(res)
		const { status, data } = res
		if (status === 200) {
			localStorage.setItem('role', data.role)
			localStorage.setItem('token', data.token)
			localStorage.setItem('userId', data.userId)
			localStorage.setItem('username', data.username)
			navigate('/')
		}
	};
	const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};
	return (
		<Form
			name="basic"
			labelCol={{ span: 8 }}
			wrapperCol={{ span: 16 }}
			style={{ maxWidth: 600, margin: '150px' }}
			initialValues={{ remember: true }}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
			autoComplete="off"
		>
			<Form.Item<FieldType>
				label="用户名"
				name="account"
				rules={[{ required: true, message: 'Please input your username!' }]}
			>
				<Input />
			</Form.Item>

			<Form.Item<FieldType>
				label="密码"
				name="password"
				rules={[{ required: true, message: 'Please input your password!' }]}
			>
				<Input.Password />
			</Form.Item>
			<Form.Item label={null}>
				<Button type="primary" htmlType="submit">
					登录
				</Button>
			</Form.Item>
		</Form>
	)
}

export default Login